<template>
  <div class="login-container">

    <el-form ref="myform" class="mylogin" :model="form" :rules="rules">
      <h3>
        <img src="../../assets/common/login-logo.png">
      </h3>
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" placeholder="手机号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="密码" type="password" prefix-icon="el-icon-lock" show-password />
      </el-form-item>
      <el-form-item>
        <el-button class="mybtn" :loading="loading" @click="login" @keyup.enter="login">登录</el-button>
      </el-form-item>
      <el-form-item>
        <el-link style="color:#fff">没有账号?去注册</el-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validateMobile } from '../../utils/validate'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      loading: false,
      form: {
        mobile: '13800000002',
        password: '123456'
      },
      rules: {
        mobile: [{
          required: true, message: '用户名不能为空', trigger: 'blur' }, {
          validator: validateMobile
        }
        ],
        password: [{
          required: true, message: '密码不能为空', trigger: 'blur' }, {
          min: 4, max: 12, message: '密码4-12位'
        }]
      }
    }
  },
  methods: {
    ...mapActions({
      userLogin: 'user/login'
    }),
    login() {
      this.loading = true
      this.$refs.myform.validate(async res => {
        try {
          if (res) {
            await this.userLogin(this.form)
            this.$message.success('欢迎登录')
            // 非白名单没有token的页面跳转回原先的页面，如果没有就跳转到首页
            const _redirect = this.$route.query._redirect
            if (_redirect) {
              this.$router.push(_redirect)
            } else { this.$router.push('/') }

            this.loading = false
          }
        } catch (err) {
          console.log('登录失败' + err.message)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-container{
  height: 100%;
  background-image: url('../../assets/common/login.jpg');
  background-position: center;
  .mylogin{
    h3{

      margin-bottom: 30px;
    }
    text-align: center;
    width: 460px;
    position: fixed;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    .el-input__inner{
      height: 50px;
      background-color:#c8dcfd ;

    }
       .el-form-item__error{
        color:#fff
      }
    .mybtn{
      width:100%;
      height: 60px;
      background-color: #4b92fe;
      border: none;
      color: #fff;
      font-size: 22px;
          }
  }
}
</style>
